﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Drawing Application</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>

        <script type="text/javascript" src="drawshapes.js"></script>
    </head>	

    <body onmousemove="updateMouseCoordinates(event)" onload="canvas_init()">
     
        <div id="selectshapes">
            <head>Shapes:</head>
            <select id="shapeselected" onchange="change_tool(event)">
                <option value="Straight Line">Straight Line</option>
                <option value="Circle">Circle</option>
                <option value="Rectangle">Rectangle</option>
                <option value="Select_and_move_shape">Select and move shape</option>
            </select>

        </div>
        
        <div id="Outline Color">
            <head>Outline Color:</head>
            <select id=olc>
                <option>Default</option>
                <option>Yellow</option>
                <option>Blue</option>
                <option>Red</option>
            </select>
        </div>
        
        <div id="Fill Color">
            <head>Fill Color:</head>
            <select id="fc">
                <option>Clear</option>
                <option>Yellow</option>
                <option>Blue</option>
                <option>Red</option>
            </select>
        </div>

         <div id="Outline Width">
            <head>Outline Width(in px):</head>
            <input id="olw" type="number" value=1></input>
        </div>

        <div id="Erase">
            <button name="Erase">Erase The Shape</button>
        
        </div>
        
        <span id="coordinates">(533, 274)</span><br />

        <div id="parent"><canvas id="basecanvas" width="900" height="900"></canvas></div>
 

    </body>
</html>
